// 类组件
// 特点: 有状态, 有生命周期, 有this, 无hooks  面向对象开发
// 创建一个类组件
// 01: 类组件名必须大写
// 02: 类组件中必须有render 方法
// 03: 类组件中的事件处理函数,可以写在类组件外, 但是不建议, 因为放涉及到操作类成员属性的时候,
// 此时事件处理函数写在类组件外就无法获取this(也就是组件实例)
// 04: 注意: react中的事件对象为合成事件对象,特点 :不存在浏览器的兼容性
// 如果想获取原生事件对象 e.nativeEvent
// 05: 类组件中的事件处理函数默认this 为undefined, 需要绑定this
// 绑定this方法1: 在类的构造器constructor中使用bind 方法绑定this

import { Component } from 'react';
// const handleClickFn = () => {
//     console.log('类组件事件');
// };
class Mycls extends Component {
    constructor() {
        super();
        // 作用: constructor 一般给类成员属性做初始化使用的
        //console.log('constructor', this);
        //第一种方式: 给当前类组件处理函数绑定this
        //this.handleClickFn = this.handleClickFn.bind(this, 100)
    }
    state = {
        count: 0
    };
    // abc = '123'
    // handleClickFn(m, e) {
    //     console.log('类组件事件');
    //     // console.log('e', e);
    //     // console.log(e.target.innerHTML);
    //     console.log('this', this);
    //     console.log('m', m);
    //     console.log('e', e);
    // };
    // 方式4: 
    handleClickFn = (e) => {
        console.log('类组件事件');
        console.log('e', e);
        // console.log(e.target.innerHTML);
        console.log('this', this);

    };
    render() {
        // this 为当前组件实例对象
        // console.log('this', this);
        // console.log(this.props.username);
        return <div>
            {/*  方式1: 在constructor构造器中班绑定this,优点: 有this 缺点: 参数传递不灵活,不常用 */}
            {/* <p onClick={this.handleClickFn}>我是类组件--{this.props.username}</p> */}
            {/*  方式2: 使用行内绑定this,优点 : 有this, 有参数 */}
            {/* <p onClick={this.handleClickFn.bind(this, 99)}>我是类组件--{this.props.username}</p> */}
            {/* 方式3:在行内使用箭头函数的形式 ,优点: 有this,有参数*/}
            {/* <p onClick={(e) => { this.handleClickFn(88, e) }}>我是类组件--{this.props.username}</p> */}
            {/* 方式4: 定义事件处理函数时, 使用箭头函数,优点: 有this, 缺点: 不能传参  */}
            {/* <p onClick={this.handleClickFn}>我是类组件--{this.props.username}</p> */}

        </div>

    }
}

export default Mycls
